Tilføj og fjern valg fra liste (flytte valg mellem 2 selectbokse) – HTML.dk

Med dette script kan du lave en formular hvor man kan flytte værdier mellem 2 selectbokse. Metoden kan være nyttig i flere sammenhænge – f.eks. når man skal fjerne og tilføje brugere til brugergrupper.

Først skal du lave en formular:

<form method="post" action="">
<table>
<tr>
<td>Mine livretter<br>
<select multiple name="select1" size='8' style="width:200px">
<option value='1'>Indisk curry</option>
<option value='2'>Pasta med pesto</option>
<option value='3'>Humus</option>
</select>
</td>

<td> 
<input type='button' style="width:70px;" value='< Tilføj'
  onClick="copySelected(this.form.select2,this.form.select1)">
<br>
<input type='button' style="width:70px;" value='Fjern  >'
  onClick="copySelected(this.form.select1,this.form.select2)">
</td>

<td>Tilgængelige retter<br>
<select multiple name="select2" size='8' style="width:200px">
<option value='4'>Pasta med ketchup</option>
<option value='5'>Lasagne</option>
<option value='6'>Big mac</option>
<option value='7'>Whopper med cheese</option>
<option value='8'>Pizza</option>
<option value='9'>Shawarma</option>
</select>
</td>

</tr>
</table>
<p><input type="button" value="Send data" onClick="SelectAll(this.form.select1);submit()">
</form>

Og så kommer vores JavaScript

function deleteOption(object,index) {
    object.options[index] = null;
}

function addOption(object,text,value) {
    var defaultSelected = true;
    var selected = true;
    var optionName = new Option(text, value, defaultSelected, selected)
    object.options[object.length] = optionName;
}

function copySelected(fromObject,toObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        if (fromObject.options[i].selected)
            addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
    }
    for (var i=fromObject.options.length-1;i>-1;i--) {
        if (fromObject.options[i].selected)
            deleteOption(fromObject,i);
    }
}

function SelectAll(fromObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        fromObject.options[i].text,fromObject.options[i].selected = true;
    }
}

Du kan se en demo her.

JavaScript validering af tekstfelt

Med dette script kan du sikre dig at brugerne husker at indtaste en værdi i et tekstfelt. Det eneste du behøver gøre er at indsætte navnet på dit tekstfelt de rigtige steder i koden – disse steder er fremhævet med gul baggrundsfarve i koden nedenfor.

Husk også at kalde javascriptfunktionen når formularen submittes – dette er markeret med grønt i koden.

Først har vi en HTML formular der skal valideres:

<form action="" method="post" onsubmit="validering();return false;">
<input type="text" name="tekstfeltnavn">
<input type="submit" value="Klik her for at validere">
</form>

Du kan herefter validere den med JavaScript

function validering()
  {
  error = 0;
  if((document.forms[0].tekstfeltnavn.value=='') && (error==0))   
  {		
    alert('Tekstfeltet skal udfyldes!');
    document.forms[0].tekstfeltnavn.focus();
    error = 1;		
  }			

  if(error == 0)
  document.forms[0].submit();	
  }

Du kan se en demo her.

Centreret popup med JavaScript

Med dette script kan du åbne et vertikalt og horisontalt centreret popup vindue (dvs. midt på skærmen). Det eneste du behøves at gøre, er at angive placeringen af siden der skal åbnes , navnet på popup vinduet  samt højden og bredden på popup vinduet.

Først lidt JavaScript

function popup(url,name,win_height,win_width) {
	pos_horizon = ((screen.width/2)-(win_width/2));
	pos_vertical = ((screen.height/2)-(win_height/2));
	window.open(url,name,"width="+win_width+",height="+win_height+",top="+pos_vertical+",left="+pos_horizon);
	}

Og så lidt html, så der er noget at klikke på.

 
<p><a href="#" onclick="popup('popup.html','mitvindue','300','300');">Åben popup vindue</a></p> 

Du finder en demo her.

Udskift billede, når musen føreres henover

Dette script preloader 2 billeder, og skifter mellem de to billeder når musen føres over.

Først lidt HTML:

 
<a href="https://www.html.dk" 
onmouseover="skiftbillede('eksempel','billede2.gif')" 
onmouseout="skiftbillede('eksempel','billede1.gif')">
<img name="eksempel" src="billede1.gif" alt="Før musen over dette billede"
style="border:none;" /></a>

Og så lidt JavaScript

billede1 = new Image();
billede1.src = "billede1.gif";

billede2 = new Image();
billede2.src = "billede2.gif";

function skiftbillede(img_name,img_src) {
document[img_name].src=img_src;
}

Nedtælling med JavaScript

Med dette script kan du lave en nedtælling til et bestemt tidspunkt – f.eks. nytårsaften.

Scriptet skal placeres i header’en på siden. Tidspunktet, der ønskes talt ned til, angives der, hvor der står “var event = new Date(“Jan 01 2020 00:00:01″);”. Hvis årstallet er før det nuværende årstal, vil tæller tælle i minus.

Først skal vi igen have lidt HTML på banen:

<h1>Nedtælling til nytårsaften</h1>
<p>Der er <input type="text" id="days" value="0" style="width:75px;" /> dage til nytårsaften<br />
Der er <input type="text" id="hours" value="0" style="width:75px;" /> timer til nytårsaften<br />
Der er <input type="text" id="minutes" value="0" style="width:75px;" /> minutter til nytårsaften<br />
Der er <input type="text" id="seconds" value="0" style="width:75px;" /> sekunder til nytårsaften</p>

Og så skal vi selvfølgelig også have noget JavaScript

var now = new Date();
var event = new Date("Jan 01 2020 00:00:01");
var seconds = (event - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID=window.setTimeout("update();", 1000);
function update() {
now = new Date();
seconds = (event - now) / 1000;
seconds = Math.round(seconds);
minutes = seconds / 60;
minutes = Math.round(minutes);
hours = minutes / 60;
hours = Math.round(hours);
days = hours / 24;
days = Math.round(days);
document.getElementById('days').value = days;
document.getElementById('hours').value = hours;
document.getElementById('minutes').value = minutes;
document.getElementById('seconds').value = seconds;
ID=window.setTimeout("update();",1000);
}

Du kan se en demo her.